<template>
  <div>
    <!--弹出的对话框-->
    <v-dialog max-width="500" v-model="show" persistent>
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{edit?"编辑":"新增"}}品牌</v-toolbar-title>
          <v-spacer/>
          <v-btn icon @click="closeWindow">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-5">

          <my-brand-form @close="closeWindow" :oldBrand="oldBrand"/>

        </v-card-text>
      </v-card>
    </v-dialog>


    <v-card>
      <!-- 卡片的头部 -->
      <v-card-title>
        <v-btn color="primary" @click="addBrand">+ 新增</v-btn>
        <v-spacer/>
        <v-spacer/>
        <v-spacer/>
        <!--搜索框，与search属性关联-->
        <v-text-field label="输入关键字搜索" v-model="search" append-icon="search" hide-details/>
      </v-card-title>
      <!-- 分割线 -->
      <v-divider/>
      <!--卡片的中部-->
      <v-data-table
        :headers="headers"
        :items="brands"
        :pagination.sync="pagination"
        :total-items="totalBrands"
        :loading="loading"
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.id }}</td>
          <td class="text-xs-center">{{ props.item.name }}</td>
          <td class="text-xs-center"><img :src="props.item.image"></td>
          <td class="text-xs-center">{{ props.item.letter }}</td>

          <td class="justify-center layout">
            <v-btn color="primary" icon fab small dark @click="editBrand(props.item)">
              <i class="el-icon-edit"/>
            </v-btn>
            <v-btn color="error" icon fab small dark @click="deleteBrand(props.item)">
              <i class="el-icon-delete"/>
            </v-btn>
          </td>
        </template>
      </v-data-table>
    </v-card>
  </div>
</template>

<script>
  import MyBrandForm from "./MyBrandForm"


  export default {
    data() {
      return {
        search: '', // 搜索过滤字段
        totalBrands: 0, //总条数
        brands: [], //当前页品牌数据
        loading: true, //是否在加载中
        pagination: {}, //分页信息
        headers: [ // 头信息
          {text: 'id', align: 'center', value: 'id'},
          {text: '名称', align: 'center', sortable: false, value: 'name'},
          {text: 'LOGO', align: 'center', sortable: false, value: 'image'},
          {text: '首字母', align: 'center', value: 'letter', sortable: true,},
          {text: '操作', align: 'center', value: 'id', sortable: false}
        ],
        show: false,
        edit: false,  //是否是被编辑
        oldBrand: {} //即将被编辑的品牌数据
      }
    },
    methods: {
      getDataFromServer() { // 从服务的加载数据的方法。
        this.$http.get("item/brand/page", {
          params: {
            page: this.pagination.page,
            rows: this.pagination.rowsPerPage,
            sortBy: this.pagination.sortBy,
            key: this.search,
            desc: this.pagination.descending
          }
        })
          .then(response => {
            console.log(response);
            this.brands = response.data.items;
            this.totalBrands = response.data.total;
            this.loading = false;
          })
      },
      addBrand() {
        this.oldBrand = null;
        this.show = true;
        this.edit = false;
      },
      editBrand(oldBrand) {
        this.$http.get("item/category/bid/" + oldBrand.id)
          .then(({data}) => {
            oldBrand.categories = data;
            this.show = true;
            this.edit = true;
            this.oldBrand = oldBrand;
          })
      },
      deleteBrand(oldBrand) {
        this.$message.confirm("确认要删除商品吗？")
          .then(() => {
            this.$http.delete("item/brand/delete?bid=" + oldBrand.id)
              .then(() => {
                // 提示成功
                this.getDataFromServer();
                this.$message.success("删除成功");
              })
              .catch(() => {
                this.$message.error("删除失败");
              });
          })
      },
      closeWindow() {
        this.show = false;
        this.getDataFromServer();
      }
    },
    mounted() {
      this.getDataFromServer();
    },
    watch: {
      pagination: {
        deep: true,
        handler() {
          if (this.pagination.rowsPerPage === -1) {
            this.pagination.rowsPerPage = this.pagination.totalItems;
          }
          this.getDataFromServer();
        }
      },
      search: {
        handler() {
          this.getDataFromServer();
        }
      }
    },
    components: {
      MyBrandForm
    }
  }
</script>

<style scoped>

</style>
